<template>
	<view class="bigMorePicker" @touchmove.stop.prevent="()=>false" @tap="closePicker">
		<view class="morePickerCent" @tap.stop="()=>false">
			<view class="morePickerTitle">
				<view @tap="closePicker" style="color: #333;">取消</view>
				<view   style="color: #333;">地区</view>
				<view @tap="confirmPicker" style="color:#EA5404">确认</view>
			</view>
			<picker-view indicator-style="height: 50px;" :value="defaultValue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in oneList" :key="index">{{item.provinceName}}</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in twoList" :key="index">{{item.cityName}}</view>
			    </picker-view-column>
			<!--    <picker-view-column>
			        <view class="item" v-for="(item,index) in threeList" :key="index">{{item.name}}</view>
			    </picker-view-column> -->
			</picker-view>
		</view>
	</view>
</template> 

<script>
	export default {
		name:"morePicker",
		data() {
			return {
				
			};
		},
		props:{
					//第一列数据
					oneList:{
						type:Array,
						default(){
							[]
						}
					},
					//第二列数据
					twoList:{
						type:Array,
						default(){
							[]
						}
					},
					// //第三列数据
					// threeList:{
					// 	type:Array,
					// 	default(){
					// 		[]
					// 	}
					// },
					//默认
					defaultValue:{
						type:Array,
						default(){
							[]
						}
					},
				}, 
		methods:{
					//变化
					bindChange(e) {
						this.$emit('morePickerChange',e);
						console.log(e)
					},
					//取消
					closePicker(){
						this.$emit('closeMorePicker')
					},
					//确认
					confirmPicker(){
						this.$emit('confirmMorePicker')
					}
				} 
		
		
		
	}
</script>

<style lang='scss' scoped>
.bigMorePicker{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}
	.morePickerCent{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		
	}
	.morePickerTitle{
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		border-bottom: #eee 2rpx solid;
	}
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	} 
</style>